<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .timebox {
            width: 500px;
            margin: 20px auto;
            height: 40px;
            border: 1px solid #000;
            ;
            line-height: 40px;
            text-align: center
        }

        .timebox span {
            padding-left: 20px;
            color: palevioletred;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <label>截止日期<input type="text" value="2019/10/10"></label>
    <div class="timebox">
        距离抢购还剩<span>-- : -- : --</span>
    </div>

    <script>
        let input = document.getElementsByTagName('input')[0]
        let timebox = document.getElementsByClassName('timebox')[0]
        let timeSpan = timebox.getElementsByTagName('span')[0]
        let autotimer = null
        let serverTime = null

        let queryDate = function () {
            // 同步代码放在new Promise（）外面
            if (serverTime) {
                // 手动改变serverTime加1s在返回
                serverTime = new Date(serverTime.getTime() + 1000)
                return serverTime
            }
            return new Promise((resolve, reject) => {
                // 异步代码
                let xhr = new XMLHttpRequest()
                xhr.open('HEAD', '1.json')
                xhr.onreadystatechange = () => {
                    if (!/^(2|3)\d{2}$/.test(xhr.status)) return
                    if (xhr.readyState == 2) {
                        serverTime = new Date(xhr.getResponseHeader('date'))
                        resolve(serverTime)
                    }
                }
                xhr.send(null)
            })
        }



        function computedTime() {
            let promise = new queryDate()
            promise instanceof Promise ? promise.then(fn) : fn(promise)
            function fn(serverTime) {
                let timediff = new Date(input.value.replace(/-/g, '/')) - serverTime
                if (timediff <= 0) { return timeSpan.innerHTML = '-- : -- : --' }
                let day = Math.floor(timediff / (1000 * 3600 * 24))
                let hour = Math.floor((timediff - day * (1000 * 3600 * 24)) / (1000 * 3600))
                let minute = Math.floor((timediff - day * (1000 * 3600 * 24) - hour * (1000 * 3600)) / (1000 * 60))
                let second = Math.floor(timediff - day * (1000 * 3600 * 24) - hour * (1000 * 3600) - minute * (1000 * 60))/1000;
                [day, hour, minute, second] = [day, hour, minute, second].map(element => element.toString().padStart(2, '0'))
                timeSpan.innerHTML = `${day}天 ${hour}:${minute}:${second}`
            }
        }
        computedTime()
        autotimer = setInterval(computedTime, 1000)


    </script>


</body>

</html>